<!-- 文章资讯 -->
<template>
	<view >
		<cu-custom bgColor="bg-gradual-blue" :isBack="false" v-show="isShow">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">文章资讯</block>
		</cu-custom>

		<!-- <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index == TabCur?'text-blue cur':''" v-for="(item,index) in navTop"
				:key="index" @tap="tabSelect" :data-id="index">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="cu-card article no-card">
			<view class="cu-item shadow borderBottom" @click="goNews">
				<view class="title">
					<view class="text-cut">来，一起手撕32个大厂高频面试编程题</view>
				</view>
				<view class="content">
					<image src="http://cdn.zhoukaiwen.com/5a97516eada18453046c61a263f41ef9.jpg" mode="aspectFill">
					</image>
					<view class="desc">
						<view class="text-content">作为前端开发，JS是重中之重，总结下32个手写JS问题，这些都是高频面试题，希望对你能有所帮助。</view>
						<view class="margin-top-xs">
							<view class="text-gray light sm round fl">2020年11月03日</view>
							<view class="text-gray light sm round fr">
								<text class="text-gray cuIcon-mark" style="font-size: 34rpx;"></text>
								<text>11</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<view class="u-tabs-box">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750" style="width: 750rpx;"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: 1000rpx;"  :style="!isShow?'margin-top:0px;':''">
			<swiper-item class="swiper-item" v-for="(item, index) in noticeList" :key="index">
				<!-- {{check}} -->
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
				<!-- 	<view v-for="it in item" class="noticeList">
						<view class="noticeItem">
							<view>{{it.noticeTitle}}</view>
							<view>{{it.createTime}}</view>
						</view>
					</view> -->
					<u-cell-group v-for="it,indexSub in item" :key="indexSub">
						<u-cell-item title-width="600" :title="it.noticeTitle" @click="goNews(it.noticeId)"
							:label="it.createTime"></u-cell-item>
					</u-cell-group>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import {
		getNoticeList
	} from '../../common/api/notice.js'
	import{
		getNoticeType
	} from '../../common/api/dict/data.js'
	export default {
		data() {
			return {
				isShow:true,
				TabCur: 0,
				scrollLeft: 0,
				list: [{
					name: '任务'
				}, {
					name: '公告'
				}, {
					name: '动态'
				}, {
					name: '新闻'
				}, {
					name: '其他'
				}],
				check: undefined,
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				noticeList: [
					[],
					[],
					[],
					[],
					[]
				],
				queryParam:{
					pageNum:1,
					pageSize:10
				}
			};
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			// tabSelect(e) {
			// 	this.TabCur = e.currentTarget.dataset.id;
			// 	this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			// },
			goNews(id) {
				uni.navigateTo({
					url: '../news/news?noticeId=' + id
				})
			}
		},
		mounted() {
			
			try {
				let mid = getCurrentPages()[1].__displayReporter.query.mid
				console.log(mid)
				if (mid == 2) {
					mid = 3;
				} else if (mid == 3) {
					mid = 2
				} else if (mid == 4) mid = 1;
				this.current = mid
				this.swiperCurrent = mid
				this.isShow = false
			} catch (error) {
				console.log("unHandle...");
			}
			getNoticeList(this.queryParam).then(res => {
				// console.log(res[1].data.rows)
				res = res[1].data.rows
				res.map(a => {
					this.noticeList[a.noticeType - 1].push(a);
				})
			})
			
			getNoticeType().then(res=>{
				let data = res[1].data.data
				data = data.map(a=>{
					return {
						name:a.dictLabel
					}
				})
				this.list = data
				console.log(data)
			})
		},
	}
</script>

<style lang="scss" scoped>
	.borderBottom {
		border-bottom: 1px solid #f2f2f2;
	}

	.noticeList {
		height: 120rpx;
		width: 100%;
		padding: 0 10px;
		margin: 10px 0;
	}

	.noticeItem {
		height: 100%;
		width: 100%;
		background-color: #fff;
		border-radius: 6px;
		padding: 10px;
	}
</style>
